<template>
	<view v-if="props.type==='normal'" class="tag normal">
		{{props.tag}}
	</view>
	<view v-if="props.type==='warn'" class="tag warn">
		{{props.tag}}
	</view>
	<view v-if="props.type==='danger'" class="tag danger">
		{{props.tag}}
	</view>
</template>

<script setup>
	const props = defineProps({
		tag: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'normal'
		}
	})
</script>

<style lang="less" scoped>
	.tag {
		padding: 8rpx;
		border-radius: 20rpx;
		text-align: center;
		font-size: 28rpx;

		&.normal {
			background-color: #f0f9eb;
			border: #71c647 1rpx solid;
			color: #67c23a;
		}

		&.warn {
			background-color: #fdf6ec;
			border: #f3d19e 1rpx solid;
			color: #e6a23c;
		}

		&.danger {
			background-color: #fef0f0;
			border: #f56c6c 1rpx solid;
			color: #fab6b6;
		}
	}
</style>